<template>
    <div id="home">
        <div class="bakimg">
            <div class="title">
                2023某市职业学校教学能力大赛
            </div>
            <div class="btn" @click="toApplication">
                <span class="text">我要报名</span>
                <div class="ico"></div>
            </div>
        </div>
        <div class="game">
            <div class="gametitle"><img src="../assets/img/组 3@2x.png"/><span>赛事流程</span><img src="../assets/img/组 3@2x.png"/></div>
            <div class="group">
                <div class="card"><img style="width: 4vw;height: 4vw;" src="../assets/img/组 4@2x(1).png"/><span>登录报名</span></div>
                <img class="ico" src="../assets/img/矢量智能对象 拷贝 5@2x.png"/>
                <div class="card"><img style="width: 4vw;height: 4vw;" src="../assets/img/组 5@2x.png"/><span>提交作品</span></div>
                <img class="ico" src="../assets/img/矢量智能对象 拷贝 5@2x.png"/>
                <div class="card"><img style="width: 4vw;height: 4vw;" src="../assets/img/组 6@2x.png"/><span>作品评审</span></div>
                <img class="ico" src="../assets/img/矢量智能对象 拷贝 5@2x.png"/>
                <div class="card"><img style="width: 4vw;height: 4vw;" src="../assets/img/组 7@2x.png"/><span>获奖公示</span></div>
            </div>
        </div>
        <div class="notice">
            <div class="gametitle"><img src="../assets/img/组 3@2x.png"/><span>通知公告</span><img src="../assets/img/组 3@2x.png"/></div>
            <div class="new">
                <div class="newlist">
                    <ul>
                        <li><a href="https://www.baidu.com/">关于公布2023年全国职业院校技能大赛德育与思想政治教育有关赛顺现场决職...</a></li>
                        <li><a href="https://www.baidu.com/">教育部办公厅关于举办2023年全国职业院校技能大赛德育与思想政治教育有关...</a></li>
                        <li><a href="https://www.baidu.com/">2023年全国职业院校技能大赛中等职业学校班主住能力比舞方案</a></li>
                    </ul>
                    <ul>
                        <li><a href="https://www.baidu.com/">关于举办2023年全国职业院校技能大赛教学能力比赛决赛有关事项的通知</a></li>
                        <li><a href="https://www.baidu.com/">2023年全国职业院校技能大赛思想政治教育课程教学能力比条方案 （中等职业...</a></li>
                        <li><a href="https://www.baidu.com/">2023年全国职业院校技能大赛教学能力比赛常见问题答疑</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {useRouter} from 'vue-router'
import {useGlobStore} from '@/stores/useGlobStore'
import {ElMessage } from 'element-plus';

const store = useGlobStore();

const router = useRouter()

const toApplication = ()=>{
    if(localStorage.getItem('dsUser'))
    {
        let user = JSON.parse(String(localStorage.getItem('dsUser')))
        if(user.userType == '1')
        {
            router.push('/application')
        }
        else
        {
            ElMessage({
                showClose: true,
                message: '您不是参赛者，无法报名',
                type: 'error'
            })
        } 
    }else{
        store.setIsLogin(true);
        router.push('/home');
    }
}
</script>

<style scoped>
.bakimg{
    width: 100%;
    height: 26vw;
    background: url("../assets/img/组 2@2x.png") no-repeat center;
    background-size: 100% 100%
}
.title{
    width: 45vw;
    height: auto;
    font-size: 3.6vw;
    color: #fff;
    font-weight: 500;
    margin-left: 10vw;
    padding-top: 3vw;
}
.btn
{
    width: 11vw;
    height: 3.6vw;
    border-radius: 1.8vw;
    background-color: #ffffff;
    margin-left: 10vw;
    margin-top: 2vw;

    display: flex;
    justify-content: center;
    align-items: center;
}
.text
{
    color: #409EFF;
    font-size: 1.5vw;
    font-weight: 600;
}
.game,.notice
{
    width: 100%;
    min-height: 26vw;
    background-color: #ffffff;
    overflow: auto;
}
.notice
{
    background-color: #efefef;
}
.gametitle
{
    width: 100%;
    height: 6vw;
    padding-top: 2vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gametitle>img
{
    width: 2vw;
    height: 1vw;
}
.gametitle>span
{
    font-size: 2vw;
    font-weight: 600;
    margin-left: 2vw;
    margin-right: 2vw
}
.group
{
    width: 100%;
    height: 9vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3vw;
}
.card
{
    width: 18vw;
    height: 8vw;
    background-color: #198afc;
    border-radius: 0.6vw;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card>span
{
    font-size: 1.5vw;
    font-weight: 600;
    color: #fff;
    margin-left: 1.6vw;
}
.ico
{
    width: 1.5vw;
    height: 1.5vw;
    margin: 0.5vw;
    background: url("../assets/img/矢量智能对象 拷贝 5@2x.png") no-repeat center;
    background-size: 100% 100%
}
.newlist
{
    
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.newlist li
{
    margin: 1.8vw;
}
.newlist li a
{
    color: black;
    text-decoration: none;
}
.newlist li a:hover
{
    color: #198afc;
}
</style>